<template>
  <div class="electric">
    <div class="electric-tip" v-if="store.personValueData(props.deviceId).power < 20">设备将在{{ store.personValueData(props.deviceId).power*5 }}分钟后关机!</div>
    <div class="electric-container">
      <div class="electric-text">{{ store.personValueData(props.deviceId).power }}</div>
      <div class="electric-last" :style="{width: `${40*store.personValueData(props.deviceId).power*0.01}px`, background: store.personValueData(props.deviceId).power<20 ? '#f56c6c' : '#67c23a'}"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useEquipmentInfoStore} from '@/stores/equipment-info-store'
const props = defineProps({
  deviceId: {
    type: String, 
    default: ''
  }
}) as {
  deviceId: string
}
const store = useEquipmentInfoStore()
</script>
<style lang="less" scoped>
.electric {
  display: flex;
  align-items: center;
  .electric-tip {
    border-radius: 3px;
    margin-right: 5px;
    padding: 8px 12px;
    background-color: rgb(139 54 68);
    font-size: 12px;
  }
}
.electric-container {
  position: relative;
  width: 40px;
  border: 1px solid #d2d2d2;
  border-radius: 3px;
  height: 20px;
  .electric-last {
    margin: 3px;
    height: 14px;
        
  }
  .electric-text {
    position: absolute;
    color: #fff;
    font-size: 12px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.electric-container::after {
  position: absolute;
  content: '';
  width:2px;
  height: 6px;
  background-color: #d2d2d2;
  right:-2px;
  top: 6px;
}
</style>
